﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Components | Agency HTML5 Responsive Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
    ================================================== -->
<div class="nav-agency">
  <div class="navbar navbar-static-top"> 
    <!-- navbar-fixed-top -->
    <div class="navbar-inner">
      <div class="container"> <a class="brand" href="index.html"> <img src="assets/img/Logodark.png" alt="Logo"></a>
        <div id="main-nav">
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class=""><a href="index.html">Home</a> </li>
              <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:"> Work <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="work.html">One Column</a></li>
                  <li><a href="work-two-columns.html">Two Column</a></li>
                  <li><a href="work-three-columns.html">Three Column</a></li>
                  <li><a href="work-details.html">Work Details</a></li>
                </ul>
              </li>
              <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:"> Pricing <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="pricing.html">Four Column</a></li>
                  <li><a href="pricing-three-columns.html">Three Column</a></li>
                </ul>
              </li>
              <li class="dropdown active"><a href="javascript:" class="dropdown-toggle" data-toggle="dropdown"> Pages <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="faq.html">FAQ</a></li>
                  <li><a href="contact.html">Contact Us</a></li>
                  <li><a href="components.html">Components</a></li>
                </ul>
              </li>
              <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:"> Blog <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="blog.html">Blog Page</a></li>
                  <li><a href="blog-single.html">Single Page</a></li>
                </ul>
              </li>
              <li><a href="index.html">Purchase</a> </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row-fluid">
    <div class="span12"> 
      <!-- Dropdowns
        ================================================== -->
      <section id="dropdowns">
        <div class="row-fluid">
          <div class="span12">
            <div class="page-header">
              <div class="row-fluid">
                <div class="span12">
                  <h1>Components</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bs-docs-example">
          <div class="dropdown clearfix">
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
              <li><a tabindex="-1" href="#">Action</a></li>
              <li><a tabindex="-1" href="#">Another action</a></li>
              <li><a tabindex="-1" href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </div>
        </div>
        <h4>Sub menus on dropdowns</h4>
        <div class="bs-docs-example">
          <div class="dropdown clearfix">
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
              <li><a tabindex="-1" href="#">Action</a></li>
              <li><a tabindex="-1" href="#">Another action</a></li>
              <li><a tabindex="-1" href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Second level link</a></li>
                  <li><a tabindex="-1" href="#">Second level link</a></li>
                  <li><a tabindex="-1" href="#">Second level link</a></li>
                  <li><a tabindex="-1" href="#">Second level link</a></li>
                  <li><a tabindex="-1" href="#">Second level link</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <!-- Button Groups
        ================================================== -->
      <section id="buttonGroups">
        <h4>Single button group</h4>
        <div class="bs-docs-example">
          <div class="btn-group" style="margin: 9px 0 5px;">
            <button class="btn">Left</button>
            <button class="btn">Middle</button>
            <button class="btn">Right</button>
          </div>
        </div>
        <h4>Multiple button groups</h4>
        <div class="bs-docs-example">
          <div class="btn-toolbar" style="margin: 0;">
            <div class="btn-group">
              <button class="btn">1</button>
              <button class="btn">2</button>
              <button class="btn">3</button>
              <button class="btn">4</button>
            </div>
            <div class="btn-group">
              <button class="btn">5</button>
              <button class="btn">6</button>
              <button class="btn">7</button>
            </div>
            <div class="btn-group">
              <button class="btn">8</button>
            </div>
          </div>
        </div>
        <h4>Vertical button groups</h4>
        <div class="bs-docs-example">
          <div class="btn-group btn-group-vertical">
            <button type="button" class="btn"><i class="icon-align-left"></i></button>
            <button type="button" class="btn"><i class="icon-align-center"></i></button>
            <button type="button" class="btn"><i class="icon-align-right"></i></button>
            <button type="button" class="btn"><i class="icon-align-justify"></i></button>
          </div>
        </div>
      </section>
      <!-- Split button dropdowns
        ================================================== -->
      <section id="buttonDropdowns">
        <h4>Button with Drops</h4>
        <div class="bs-docs-example">
          <div class="btn-toolbar" style="margin: 0;">
            <div class="btn-group">
              <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group --> 
          </div>
          <!-- /btn-toolbar --> 
        </div>
        <h4>Works with all button sizes</h4>
        <div class="bs-docs-example">
          <div class="btn-toolbar" style="margin: 0;">
            <div class="btn-group">
              <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group --> 
          </div>
          <!-- /btn-toolbar --> 
        </div>
        <h4>Split button dropdowns</h4>
        <div class="bs-docs-example">
          <div class="btn-toolbar" style="margin: 0;">
            <div class="btn-group">
              <button class="btn">Action</button>
              <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-primary">Action</button>
              <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-danger">Danger</button>
              <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-warning">Warning</button>
              <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-success">Success</button>
              <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-info">Info</button>
              <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
              <button class="btn btn-inverse">Inverse</button>
              <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group --> 
          </div>
          <!-- /btn-toolbar --> 
        </div>
        <h4>Sizes</h4>
        <div class="bs-docs-example">
          <div class="btn-toolbar">
            <div class="btn-group">
              <button class="btn btn-large">Large action</button>
              <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group --> 
          </div>
          <!-- /btn-toolbar -->
          <div class="btn-toolbar">
            <div class="btn-group">
              <button class="btn btn-small">Small action</button>
              <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group --> 
          </div>
          <!-- /btn-toolbar -->
          <div class="btn-toolbar">
            <div class="btn-group">
              <button class="btn btn-mini">Mini action</button>
              <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group --> 
          </div>
          <!-- /btn-toolbar --> 
        </div>
        <h4>Dropup menus</h4>
        <div class="bs-docs-example">
          <div class="btn-toolbar" style="margin: 0;">
            <div class="btn-group dropup">
              <button class="btn">Dropup</button>
              <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group dropup">
              <button class="btn primary">Right dropup</button>
              <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu pull-right">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <!-- /btn-group --> 
          </div>
        </div>
      </section>
      <!-- Nav, Tabs, & Pills
        ================================================== -->
      <section id="navs">
        <h4>Basic tabs</h4>
        <div class="bs-docs-example">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
          </ul>
        </div>
        <h4>Basic pills</h4>
        <div class="bs-docs-example">
          <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
          </ul>
        </div>
        <h4>Disabled state</h4>
        <div class="bs-docs-example">
          <ul class="nav nav-pills">
            <li><a href="#">Clickable link</a></li>
            <li><a href="#">Clickable link</a></li>
            <li class="disabled"><a href="#">Disabled link</a></li>
          </ul>
        </div>
        <h4>Tabs with dropdowns</h4>
        <div class="bs-docs-example">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Help</a></li>
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <h4>Pills with dropdowns</h4>
        <div class="bs-docs-example">
          <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Help</a></li>
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <h4>Nav lists</h4>
        <div class="bs-docs-example">
          <div class="well" style="max-width: 340px; padding: 8px 0;">
            <ul class="nav nav-list">
              <li class="nav-header">List header</li>
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Library</a></li>
              <li><a href="#">Applications</a></li>
              <li class="nav-header">Another list header</li>
              <li><a href="#">Profile</a></li>
              <li><a href="#">Settings</a></li>
              <li class="divider"></li>
              <li><a href="#">Help</a></li>
            </ul>
          </div>
          <!-- /well --> 
        </div>
        <h4>Tabbable nav</h4>
        <div class="bs-docs-example">
          <div class="tabbable" style="margin-bottom: 18px;">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
              <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
              <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab1">
                <p>I'm in Section 1.</p>
              </div>
              <div class="tab-pane" id="tab2">
                <p>Howdy, I'm in Section 2.</p>
              </div>
              <div class="tab-pane" id="tab3">
                <p>What up girl, this is Section 3.</p>
              </div>
            </div>
          </div>
          <!-- /tabbable --> 
        </div>
        <h4>Tabs on the bottom</h4>
        <div class="bs-docs-example">
          <div class="tabbable tabs-below">
            <div class="tab-content">
              <div class="tab-pane active" id="A">
                <p>I'm in Section A.</p>
              </div>
              <div class="tab-pane" id="B">
                <p>Howdy, I'm in Section B.</p>
              </div>
              <div class="tab-pane" id="C">
                <p>What up girl, this is Section C.</p>
              </div>
            </div>
            <ul class="nav nav-tabs">
              <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
              <li><a href="#B" data-toggle="tab">Section 2</a></li>
              <li><a href="#C" data-toggle="tab">Section 3</a></li>
            </ul>
          </div>
          <!-- /tabbable --> 
        </div>
        <h4>Tabs on the left</h4>
        <div class="bs-docs-example">
          <div class="tabbable tabs-left">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
              <li><a href="#lB" data-toggle="tab">Section 2</a></li>
              <li><a href="#lC" data-toggle="tab">Section 3</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="lA">
                <p>I'm in Section A.</p>
              </div>
              <div class="tab-pane" id="lB">
                <p>Howdy, I'm in Section B.</p>
              </div>
              <div class="tab-pane" id="lC">
                <p>What up girl, this is Section C.</p>
              </div>
            </div>
          </div>
          <!-- /tabbable --> 
        </div>
        <h4>Tabs on the right</h4>
        <div class="bs-docs-example">
          <div class="tabbable tabs-right">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
              <li><a href="#rB" data-toggle="tab">Section 2</a></li>
              <li><a href="#rC" data-toggle="tab">Section 3</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="rA">
                <p>I'm in Section A.</p>
              </div>
              <div class="tab-pane" id="rB">
                <p>Howdy, I'm in Section B.</p>
              </div>
              <div class="tab-pane" id="rC">
                <p>What up girl, this is Section C.</p>
              </div>
            </div>
          </div>
          <!-- /tabbable --> 
        </div>
      </section>
      <!-- Breadcrumbs
        ================================================== -->
      <section id="breadcrumbs">
        <h4>Breadcrumbs</h4>
        <div class="bs-docs-example">
          <ul class="breadcrumb">
            <li class="active">Home</li>
          </ul>
          <ul class="breadcrumb">
            <li><a href="#">Home</a> <span class="divider">/</span></li>
            <li class="active">Library</li>
          </ul>
          <ul class="breadcrumb" style="margin-bottom: 5px;">
            <li><a href="#">Home</a> <span class="divider">/</span></li>
            <li><a href="#">Library</a> <span class="divider">/</span></li>
            <li class="active">Data</li>
          </ul>
        </div>
      </section>
      <!-- Pagination
        ================================================== -->
      <section id="pagination">
        <h4>Standard pagination</h4>
        <div class="bs-docs-example">
          <div class="pagination">
            <ul>
              <li><a href="#">«</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">»</a></li>
            </ul>
          </div>
        </div>
        <h4>Pager</h4>
        <div class="bs-docs-example">
          <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
          </ul>
        </div>
      </section>
      <!-- Labels and badges
        ================================================== -->
      <section id="labels-badges">
        <h4>Labels</h4>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Labels</th>
              <th>Markup</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="label">Default</span></td>
              <td><code>&lt;span class="label"&gt;Default&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td><span class="label label-success">Success</span></td>
              <td><code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td><span class="label label-warning">Warning</span></td>
              <td><code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td><span class="label label-important">Important</span></td>
              <td><code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td><span class="label label-info">Info</span></td>
              <td><code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td><span class="label label-inverse">Inverse</span></td>
              <td><code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code></td>
            </tr>
          </tbody>
        </table>
        <h4>Badges</h4>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Example</th>
              <th>Markup</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td> Default </td>
              <td><span class="badge">1</span></td>
              <td><code>&lt;span class="badge"&gt;1&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td> Success </td>
              <td><span class="badge badge-success">2</span></td>
              <td><code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td> Warning </td>
              <td><span class="badge badge-warning">4</span></td>
              <td><code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td> Important </td>
              <td><span class="badge badge-important">6</span></td>
              <td><code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td> Info </td>
              <td><span class="badge badge-info">8</span></td>
              <td><code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code></td>
            </tr>
            <tr>
              <td> Inverse </td>
              <td><span class="badge badge-inverse">10</span></td>
              <td><code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code></td>
            </tr>
          </tbody>
        </table>
      </section>
      <!-- Typographic components
        ================================================== -->
      <section id="typography">
        <h4>Hero unit</h4>
        <div class="bs-docs-example">
          <div class="hero-unit">
            <h1>Hello, world!</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-large">Learn more</a></p>
          </div>
        </div>
        <h4>Page header</h4>
        <div class="bs-docs-example">
          <div class="page-header">
            <h1>Example page header <small>Subtext for header</small></h1>
          </div>
        </div>
      </section>
      <!-- Alerts
        ================================================== -->
      <section id="alerts">
        <h4>Default alert</h4>
        <div class="bs-docs-example">
          <div class="alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
        </div>
        <div class="bs-docs-example">
          <div class="alert alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <h4>Warning!</h4>
            <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
          </div>
        </div>
        <h4>Error or danger</h4>
        <div class="bs-docs-example">
          <div class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Oh snap!</strong> Change a few things up and try submitting again. </div>
        </div>
        <h4>Success</h4>
        <div class="bs-docs-example">
          <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Well done!</strong> You successfully read this important alert message. </div>
        </div>
        <h4>Information</h4>
        <div class="bs-docs-example">
          <div class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div>
        </div>
      </section>
      <!-- Progress bars
        ================================================== -->
      <section id="progress">
        <h4>Progress bars <small>For loading, redirecting, or action status</small></h4>
        <h4>Basic</h4>
        <div class="bs-docs-example">
          <div class="progress">
            <div class="bar" style="width: 60%;"></div>
          </div>
        </div>
        <h4>Striped</h4>
        <div class="bs-docs-example">
          <div class="progress progress-striped">
            <div class="bar" style="width: 20%;"></div>
          </div>
        </div>
        <h4>Animated</h4>
        <div class="bs-docs-example">
          <div class="progress progress-striped active">
            <div class="bar" style="width: 45%"></div>
          </div>
        </div>
        <h4>Stacked</h4>
        <div class="bs-docs-example">
          <div class="progress">
            <div class="bar bar-success" style="width: 35%"></div>
            <div class="bar bar-warning" style="width: 20%"></div>
            <div class="bar bar-danger" style="width: 10%"></div>
          </div>
        </div>
      </section>
      <!-- Modal
        ================================================== -->
      <section id="modals">
        <h4>Modals </h4>
        <div class="bs-docs-example" style="background-color: #f5f5f5;">
          <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h4>Modal header</h4>
            </div>
            <div class="modal-body">
              <p>One fine body…</p>
            </div>
            <div class="modal-footer"> <a href="#" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div>
          </div>
        </div>
        <h4>Live demo</h4>
        <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
        <!-- sample modal content -->
        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">
            Modal Heading
            </h4>
          </div>
          <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
            <h4>Popover in a modal</h4>
            <p>This <a href="#" role="button" class="btn popover-test" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on hover.</p>
            <h4>Tooltips in a modal</h4>
            <p><a href="#" class="tooltip-test" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
            <hr>
            <h4>Overflowing text to show optional scrollbar</h4>
            <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          </div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
            <button class="btn btn-primary">Save changes</button>
          </div>
        </div>
        <div class="bs-docs-example" style="padding-bottom: 24px;"> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a> </div>
      </section>
      <!-- Tooltips
        ================================================== -->
      <section id="tooltips">
        <h4>Tooltips</h4>
        <div class="bs-docs-example tooltip-demo">
          <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. </p>
        </div>
        <h4>Four directions</h4>
        <div class="bs-docs-example tooltip-demo">
          <ul class="bs-docs-tooltip-examples">
            <li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
            <li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
            <li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
            <li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
          </ul>
        </div>
      </section>
      <!-- Popovers
      ================================================== -->
      <section id="popovers">
        <h4>Popovers</h4>
        <h4>Static popover</h4>
        <div class="bs-docs-example bs-docs-example-popover">
          <div class="popover top">
            <div class="arrow"></div>
            <h3 class="popover-title">
            Popover top
            </h4>
            <div class="popover-content">
              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            </div>
          </div>
          <div class="popover right">
            <div class="arrow"></div>
            <h3 class="popover-title">
            Popover right
            </h4>
            <div class="popover-content">
              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            </div>
          </div>
          <div class="popover bottom">
            <div class="arrow"></div>
            <h3 class="popover-title">
            Popover bottom
            </h4>
            <div class="popover-content">
              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            </div>
          </div>
          <div class="popover left">
            <div class="arrow"></div>
            <h3 class="popover-title">
            Popover left
            </h4>
            <div class="popover-content">
              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
        <p>No markup shown as popovers are generated from JavaScript and content within a <code>data</code> attribute.</p>
        <h4>Live demo</h4>
        <div class="bs-docs-example" style="padding-bottom: 24px;"> <a href="#" class="btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a> </div>
      </section>
      <!-- Collapse
          ================================================== -->
      <section id="collapse">
        <h4>Collapse</h4>
        <div class="bs-docs-example">
          <div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div>
              <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a> </div>
              <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> Collapsible Group Item #3 </a> </div>
              <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Carousel
          ================================================== -->
      <section id="carousel">
        <h4>Carousel</h4>
        <div class="span9">
          <div class="bs-docs-example">
            <div id="myCarousel" class="carousel slide">
              <div class="carousel-inner">
                <div class="item next left"> <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
                  <div class="carousel-caption">
                    <h4>First Thumbnail label</h4>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  </div>
                </div>
                <div class="item"> <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
                  <div class="carousel-caption">
                    <h4>Second Thumbnail label</h4>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  </div>
                </div>
                <div class="item active left"> <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
                  <div class="carousel-caption">
                    <h4>Third Thumbnail label</h4>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  </div>
                </div>
              </div>
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </section>
    </div>
  </div>
</div>
<!-- Footer
    ================================================== -->
<footer class="footer">
  <div class="container">
    <div class="row-fluid">
      <div class="span3">
        <h4>Navigation</h4>
        <ul class="footer-links">
          <li><a href="#">Home</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Elements</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
      </div>
      <div class="span3 MT70">
        <h4>Useful Links</h4>
        <ul class="footer-links">
          <li><a href="#">eGrappler.com</a></li>
          <li><a href="#">Greepit.com</a></li>
          <li><a href="#">WordPress.com</a></li>
          <li><a href="#">ThemeForest.net</a></li>
          <li><a href="#">Free Vector Icons</a></li>
        </ul>
      </div>
      <div class="span3 MT70">
        <h4>Something from Flickr</h4>
        <div id="flickr-wrapper"> 
          <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=10133335@N08"></script> 
        </div>
      </div>
      <div class="span3 MT70">
        <h4>Who We Are</h4>
        <p>We are a creative production studio specialising in all things digital. Find us, connect & collaborate.</p>
        <ul class="footer_social clearfix">
          <li><a href="#" class="footer_facebook">Facebook</a></li>
          <li><a href="#" class="footer_twitter">Twitter</a></li>
          <li><a href="#" class="footer_googleplus">Google+</a></li>
          <li><a href="#" class="footer_rss">RSS</a></li>
        </ul>
      </div>
    </div>
    <hr class="soften1 copyhr">
    <div class="row-fluid copyright">
      <div class="span12">Copyright &copy; 2012. Greepit.com</div>
    </div>
  </div>
</footer>
<!-- Le javascript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
<script src="assets/js/jquery.js"></script> 
<script src="assets/js/google-code-prettify/prettify.js"></script> 
<script src="assets/js/bootstrap-transition.js"></script> 
<script src="assets/js/bootstrap-alert.js"></script> 
<script src="assets/js/bootstrap-modal.js"></script> 
<script src="assets/js/bootstrap-dropdown.js"></script> 
<script src="assets/js/bootstrap-scrollspy.js"></script> 
<script src="assets/js/bootstrap-tab.js"></script> 
<script src="assets/js/bootstrap-tooltip.js"></script> 
<script src="assets/js/bootstrap-popover.js"></script> 
<script src="assets/js/bootstrap-button.js"></script> 
<script src="assets/js/bootstrap-collapse.js"></script> 
<script src="assets/js/bootstrap-carousel.js"></script> 
<script src="assets/js/bootstrap-typeahead.js"></script> 
<script src="assets/js/bootstrap-affix.js"></script> 
<script src="assets/js/application.js"></script> 
<script src="assets/js/superfish.js" type="text/javascript"></script> 
<script src="assets/js/custom.js" type="text/javascript"></script>
</body>
</html>
